<template>
	<view>
		<view class="uni-tabbar acea-row row-around row-middle" v-if="isShow && tabbar.length && !isIframe">
			<view class="uni-tabbar_item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
				<view class="uni-tabbar_icon">
					<image v-if="item.link == pagePath" mode="aspectFit" :src="item.imgList[0]"></image>
					<image v-else mode="aspectFit" :src="item.imgList[1]"></image>
				</view>
				<view class="uni-tabbar_label" :class="{ active: item.link == pagePath }">{{ item.name }}</view>
			</view>
		</view>
		<view class="uni-tabbar acea-row row-around row-middle" v-if="isIframe && tabbar.length">
			<view class="uni-tabbar_item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
				<view class="uni-tabbar_icon">
					<image v-if="item.link == pagePath" mode="aspectFit" :src="item.imgList[0]"></image>
					<image v-else mode="aspectFit" :src="item.imgList[1]"></image>
				</view>
				<view class="uni-tabbar_label" :class="{ active: item.link == pagePath }">{{ item.name }}</view>
			</view>
		</view>
		<view v-if="isIframe && !tabbar.length" class="empty-img uni-tabbar acea-row row-around row-middle">暂无数据，请设置</view>
	</view>
</template>

<script>
let app = getApp();
import { getDiy } from '@/api/api.js';
import { goPage } from '@/libs/order.js';
export default {
	name: 'tabBar',
	props: {
		pagePath: null,
		dataConfig: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		dataConfig: {
			immediate: true,
			handler(nVal, oVal) {
				if (nVal) {
					this.isShow = nVal.isShow.val;
				}
			}
		}
	},
	data() {
		return {
			name: this.$options.name,
			page: '/pages/index/index',
			tabbar: [],
			isShow: true, //true前台显示
			isIframe: app.globalData.isIframe //true后台显示
		};
	},
	created() {},
	mounted() {
		getDiy()
			.then(res => {
				const { list } = res.data.tabBar.default.tabBarList;
				this.tabbar = [
					{
						name: '首页',
						imgList: [
							'/admin/img/foo1-01.003b4be4.png',
							''
						],
						link: '/pages/index/index'
					},
					{
						name: '分类',
						imgList: [
							'',
							''
						],
						link: '/pages/goods_cate/goods_cate'
					},
					{
						name: '购物车',
						imgList: [
							'/admin/img/foo4-01.b50f04b1.png',
							''
						],
						link: '/pages/order_addcart/order_addcart'
					},
					{
						name: '购物车',
						imgList: [
							'/admin/img/foo4-01.b50f04b1.png',
							''
						],
						link: '/pages/order_addcart/order_addcart'
					},
					{
						name: '我的',
						imgList: [
							'',
							''
						],
						link: '/pages/user/index'
					}
				];
			})
			.catch(err => {
				uni.showToast({
					title: err,
					icon: 'none'
				});
			});
	},
	methods: {
		changeTab(item) {
			goPage().then(res => {
				this.page = item.link;
				// 这里使用reLaunch关闭所有的页面，打开新的栏目页面
				uni.reLaunch({
					url: this.page
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.acea-row.row-middle {
	-webkit-box-align: center;
	-moz-box-align: center;
	-o-box-align: center;
	-ms-flex-align: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
.borderShow {
	position: fixed;
}
.borderShow .uni-tabbar::after {
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px dashed #007aff;
	box-sizing: border-box;
}
.uni-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 118rpx;
	height: calc(118rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
	height: calc(118rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	box-sizing: border-box;
	border-top: solid 1rpx #f3f3f3;
	background-color: #fff;
	box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);

	.uni-tabbar_item {
		font-size: 20rpx;
		text-align: center;
		&:nth-of-type(3) {
			.uni-tabbar_icon {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.uni-tabbar_icon {
		height: 50rpx;
		width: 50rpx;
		text-align: center;
		margin: 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.uni-tabbar_label {
		font-size: 24rpx;
		color: #282828;

		&.active {
			color: #e93323;
		}
	}
}
</style>
